<template>
  <aside>
    <!-- 连线属性 -->
    <div>
      <ul>
        <li>
          <label>源节点Id</label>
          <Input
            disabled
            v-model="content.sourceId"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>目标节点Id</label>
          <Input
            disabled
            v-model="content.targetId"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>连线类型</label>
          <Input
            disabled
            v-model="content.connector"
            placeholder="Enter something..."
            style="width: 100%"
          />
        </li>
        <li>
          <label>文本注释</label>
          <Input
            v-model="content.label"
            placeholder="请输入注释内容..."
            style="width: 100%"
            @on-change="linkLabelChange"
          />
        </li>

        <li>
          <label>路由条件</label>
          <el-tooltip class="item" effect="light" placement="bottom-start">
            <div slot="content">
              条件成立：继续执行 <br/>
              条件不成立：跳过 <br/>
              默认：条件不成立（false）；可直接输入true, false; <br/>
              循环外：使用全局变量：dataList；如：dataList.size()==0 <br/>
              循环内：使用'循环'节点设置的子项对象变量；如：dataItem.id==1
            </div>
            <Input
              v-model="content.linkRouteCondition"
              style="width: 100%"
              @on-change="linkLabelChange"
            />
          </el-tooltip>
        </li>

        <li>
          <label>特殊标志</label>
          <el-tooltip class="item" effect="light" placement="bottom-start">
            <div slot="content">
              方法体路由：条件判断和循环的方法体，进行方法体的第一条线需要做标志
            </div>
            <el-checkbox
              v-model="content.isMethodBody"
              style="width: 100%"
              label="方法体路由"
              @change="isMethodBodyChange"
            />
          </el-tooltip>
        </li>

        <li>
          <label>节点描述</label>
          <el-input
              type="textarea"
              :rows="2"
              v-model="content.description"
              style="width: 100%"
          />
        </li>

      </ul>
    </div>
  </aside>
</template>

<script>
export default {
  name: "LineAttr",
  props: {
    selectContent:Object
  },
  data() {
    return {
      content: {},
      type: "",
      jspInit: this.$store.state.taskflow.jspInit,
    };
  },
  watch:{
    'content.linkRouteCondition'(nval){
      this.content.label=nval
    },
    selectContent: {
      handler(nval) {
        if (!nval) {
          return
        }
        this.content = nval.data;
        this.type = nval.type;
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    linkLabelChange(e) {
      let label = e.target.value;
      let conn = this.jspInit.getConnections({
        source: this.content.sourceId,
        target: this.content.targetId,
      })[0];
      if (label != "") {
        conn.setLabel({
          label: label,
          cssClass: "link-label",
        });
      } else {
        let labelOverlay = conn.getLabelOverlay();
        if (labelOverlay) conn.removeOverlay(labelOverlay.id);
      }
    },
    isMethodBodyChange() {
      let isMethodBody = this.content.isMethodBody;
      let label = this.content.label;
      if (isMethodBody) {
        label = ' 方法体[重要]'
      }else{
        label = '';
      }
      this.content.label = label
      let conn = this.jspInit.getConnections({
        source: this.content.sourceId,
        target: this.content.targetId,
      })[0];
      if (label != "") {
        conn.setLabel({
          label: label,
          cssClass: "link-label",
        });
      } else {
        let labelOverlay = conn.getLabelOverlay();
        if (labelOverlay) conn.removeOverlay(labelOverlay.id);
      }
    },
  },
};
</script>

<style scoped lang="scss">
aside {
  padding: 10px;
  ul {
    list-style: none;
    li {
      margin-bottom: 5px;
      > label {
        display: block;
        font-size: 15px;
        font-weight: normal;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
